<template>
    <div  class="p16 flex-column-null-between container" style="height:calc(100vh - 140px)">
       <el-row>
            <el-col :span="5">
                <div class="grid-content bg-purple"   @click="OptionCardClose">
                    <div slot="header" style="border-bottom:1px solid #e1e4e7" class="top-from">角色类别
                        <el-button style="margin-left: 20px" type="success" size="mini" icon="el-icon-refresh"  @click="refreshRoleClass"></el-button>
                        <el-button  type="primary" size="mini" @click="addRoleClass">新增</el-button>
                    </div>

                    <div style="margin-top:20px;overflow: auto;height: calc(100vh - 250px)">
                        <el-tree 
                            v-loading="loading"
                            node-key="id"
                            :current-node-key="nowNodeId"
                            :data="classData" 
                            :props="defaultProps"
                            highlight-current
                            @node-click="handleNodeClick"
                            @node-contextmenu="contextMenu">
                            
                        </el-tree>
                        <div class="right-menu" :style="{'z-index':999,'position':'fixed',left:leftNumber + 'px',
                                top: topNumber + 'px',
                                width:'80px',
                                background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}" 
                                v-show="optionCardShow"
                                id="option-button-group">
                            <el-button @click="classChange" class="option-card-button">修改</el-button>
                            <el-button @click="classRemove" class="option-card-button">删除</el-button>
                        </div>
                        
                        <!-- 编辑类别 -->
                        <addClass ref="addClass" @success="queryRoleClass('init')"/>
                        <!-- 添加类别 -->
                        <editClass ref="editClass" @success="queryRoleClass('init')"/>
                    </div>
                    
                </div>
            </el-col>

            <el-col :span="18">
               
                <div class="grid-content bg-purple-light">
                    <div>
                        <div class="search-item">
                            <el-input
                                    size="small"
                                    v-model="queryParams.roleCode"
                                    class="input-width clear-input"
                                    suffix-icon="el-icon-search"
                                    clearable
                                    placeholder="请输入查询内容"
                            ></el-input>
                        </div>
                        <div class="search-item">
                            <el-button type="primary" size="small"  @click="queryRoleList">搜索</el-button>
                            <el-button type="primary" size="small"  @click="addRole">添加</el-button>
                        </div>
                        
                    </div>

                    <el-table
                            :data="tableData"
                            size="small"
                            :row-style="{height:'0'}"
                            style="width: 100%"
                            height="calc(100vh - 260px)"
                            v-loading="ruleLoading">
                        <el-table-column
                                v-for="(item,index) in fields"
                                :key="index"
                                :label="item.label"
                                :prop="item.prop"
                                :min-width="item.width"
                                :fixed="item.fixed"
                        >
                            <template v-if="item.prop === 'operation'" scope="scope">
                                <el-dropdown>
                                  <span class="el-dropdown-link" style="font-size: 13px">
                                    下拉操作<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item> <el-button @click="editRole(scope.row)" type="text" size="small">编辑</el-button></el-dropdown-item>
                                    <el-dropdown-item><el-button @click="removeRole(scope.row)" type="text" size="small">删除</el-button></el-dropdown-item>
                                    <el-dropdown-item> <el-button @click="relateUser(scope.row)" type="text" size="small">关联用户</el-button></el-dropdown-item>
                                    <el-dropdown-item><el-button @click="relateResource(scope.row)" type="text" size="small">关联资源</el-button></el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              &nbsp;
                                <el-button @click="dataRole(scope.row)" type="text" size="small">数据权限</el-button>
                            </template>
                            <template v-else-if="item.prop === 'dataRoleType'" scope="scope">
                                <el-tag v-if="scope.row.dataRoleType">{{getDicValue(scope.row.dataRoleType,dataRoleTypeList)}}</el-tag>
                            </template>
                        </el-table-column>
                        
                    </el-table>

                    <div class="page-container" style="float:right">
                        <el-pagination
                                :page-sizes="[10, 20, 30, 50]"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="nowPage"
                                :page-size="10"
                                layout="sizes,total, prev, pager, next"
                                :total="total">
                        </el-pagination>
                    </div>

                    <el-drawer
                        :title="relateDrawerTitle"
                        :visible.sync="relateUserDrawer"
                        :direction="direction">
                        <!-- 关联用户 -->
                        <relateUserComponent ref="relateUserComponent"/>
                    </el-drawer>
                    
                    <!-- 编辑角色 -->
                    <addRole ref="addRole" @success="queryRoleList('init')"/>
                    <!-- 添加角色 -->
                    <editRole ref="editRole" @success="queryRoleList('init')"/>
                    <!-- 关联资源 -->
                    <relateResourceComponent ref="relateResourceComponent" @success="queryRoleList('init')"/>
                    <!-- 数据权限 -->
                    <dataRoleSave ref="dataRoleSave" @success="queryRoleList('init')"/>

                    
                </div>
            </el-col>
       </el-row>
    </div>
</template>

<script>
import editClass  from "./components/EditClass";
import addClass  from "./components/AddClass";
import editRole  from "./components/EditRole";
import addRole  from "./components/AddRole";
import dataRoleSave from "./components/DataRoleSave.vue"
import relateUserComponent  from "./components/RelateUser";
import relateResourceComponent  from "./components/RelateResource";
import {getClassList,deleteRoleClass,getRoleList,removeRole,getUserListByRoleCode,relateUser,removeRelateUser} from '@/api/role';
import {getDicItem, getDicValue} from "@/utils/dicUtil";
export default {
    components: {
        editClass,
        addClass,
        editRole,
        addRole,
        dataRoleSave,
        relateUserComponent,
        relateResourceComponent
    },
    data() {
       return {
         dataRoleDialog:false,
          ruleLoading:false,
         //关联用户相关属性
          relateUserDrawer:false,
          direction: 'rtl',
          relateDrawerTitle:'关联用户',

          //侧边栏相关属性
          topNumber:0,
          leftNumber:0,
          optionCardShow:false,
          nowRoleClass:{},
          nowEditRoleClass:{},

          total: 0,
          loading: false,
          nowPage:1,
          queryParams:{
              pageNum:1,
              pageSize:10,
              roleCode:"",
              classId:""
          },
          //类别
          classData:[],
          defaultProps:{
              children: 'child',
              label: 'className',
              id:"classId",
          },
          nowNodeId:0,
          dataRoleTypeList:[],
          fields:[
              {
                  label:"角色CODE",
                  prop:"roleCode",
                  width:200
              },{
                  label:"角色名称",
                  prop:"roleName",
                  width:150
              },{
                  label:"角色别名",
                  prop:"roleNickName",
                  width:150
              },{
                  label:"数据权限",
                  prop:"dataRoleType",
                  width:150
              },{
                  label:"备注",
                  prop:"remark",
                  width:200
              },{
                  label:"操作",
                  prop:"operation",
                  width:250,
                  fixed: "right"
              }
          ],
          tableData: []
       }
    },
    created(){
        this.queryRoleClass();
        this.dataRoleTypeList = getDicItem("DATA_ROLE_TYPE");
    },
    methods:{
      getDicValue,
      dataRoleCloseDialog(){

      },
      async queryRoleClass(){
          let res = await getClassList();
          this.classData = res.data;
          if(this.classData.length > 0){
              this.nowRoleClass = this.classData[0];
              this.nowNodeId = this.nowRoleClass.classId;
              this.queryRoleList();
          }
      },
      //添加类别
      addRoleClass(){
          this.$refs["addClass"].showDialog();
      },
      refreshRoleClass(){
          this.loading = true;
          this.queryRoleClass();
          this.tableData = [];
          this.queryParams.roleCode = '';
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          this.loading = false;
      },
      //添加角色
      addRole(){
          if(this.nowRoleClass.classId == null){
              this.$message.warning("请选择角色类别");
              return;
          }
          this.$refs["addRole"].showDialog(this.nowRoleClass);
      },
      //编辑角色
      editRole(row){
          this.$refs["editRole"].showDialog(row);
      },
      //删除角色
      removeRole(row){
          this.$confirm('您是否要删除该角色?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(async () => {
              let res = await removeRole({id:row.id});
              this.queryRoleList();
          }).catch(() => {
          });
      },
      //角色关联用户
      relateUser(row){
          this.relateDrawerTitle = row.roleName;
          this.relateUserDrawer = true;
          this.$nextTick(()=>{
              this.$refs["relateUserComponent"].show(row.roleCode);
          });
      },
      //角色关联资源
      relateResource(row){
          this.$refs["relateResourceComponent"].showDialog(row);
      },
      dataRole(row){
        this.$refs["dataRoleSave"].showDialog(row.roleCode,row.dataRole);
      },
      handleSizeChange(val) {
          this.queryParams.limit = val;
      },
      handleCurrentChange(val) {
          this.queryParams.pageNum = val;
      },
      async queryRoleList(){
          if(this.nowRoleClass == null){
              return;
          }
          this.ruleLoading = true;
          this.queryParams.classId = this.nowRoleClass.classId;
          let res = await getRoleList(this.queryParams);
          let content = res.data;

          this.total = content.total;
          this.tableData = content.list;
          this.ruleLoading = false;
      },

      classChange(){
         this.$refs["editClass"].showDialog(this.nowEditRoleClass);
         this.optionCardShow = false;
      },
      classRemove(){
         this.optionCardShow = false;
          this.$confirm('您是否要删除该类别?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(async () => {
              let res = await deleteRoleClass({id:this.nowEditRoleClass.id});
              this.queryRoleClass();
          }).catch(() => {
          });
      },
      handleNodeClick(roleClass){
          this.nowRoleClass = roleClass;
          this.queryRoleList();
      },
      // 点击框外区域 隐藏菜单
      OptionCardClose(event) {
          var currentCli = document.getElementById("option-button-group");
          if (currentCli) {
              if (!currentCli.contains(event.target)) {
                  //点击到了id为option-button-group以外的区域，就隐藏菜单
                  this.optionCardShow = false;
              }
          }
      },
      //鼠标右键部门
      contextMenu(event,data){
          this.optionCardShow = false
          this.nowEditRoleClass = data;
          this.topNumber = event.pageY + 20;
          this.leftNumber = event.pageX;
          this.optionCardShow = true;
      },
    }

}

</script>

<style src="../css/index.scss" lang="scss"></style>
<style  lang="scss" scoped>
  .search-item{
        float: left;
        margin: 0 20px 20px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
  }
  .top-from{
      height: 50px;
  }
  .grid-content {
    border: 1px solid #e1e4e7;
    border-radius: 4px;
    background: #fff;
    height: calc(100vh - 160px);
    overflow: hidden;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
   .option-card-button {
        width: 100%;
        margin-left: 0;
        font-size: 12px;
        border-radius: 0;
    }
</style>